การจำกัดขอบเขตสไตล์ CSS: ปลดล็อกการแยกประสิทธิภาพการเรนเดอร์สำหรับประสบการณ์เว็บทั่วโลก

ในโลกที่เชื่อมโยงถึงกันในปัจจุบัน ประสิทธิภาพของเว็บไม่ใช่แค่คุณสมบัติที่น่าปรารถนาเท่านั้น แต่เป็นความคาดหวังพื้นฐาน ผู้ใช้ไม่ว่าจะอยู่ในตำแหน่งทางภูมิศาสตร์ใดหรือใช้อุปกรณ์ใด ล้วนต้องการการโต้ตอบที่รวดเร็ว ลื่นไหล และตอบสนองได้ดีเยี่ยม เว็บไซต์ที่โหลดช้าหรือไม่เสถียรอาจนำไปสู่ความหงุดหงิด การละทิ้งเซสชัน และผลกระทบเชิงลบอย่างมากต่อการมีส่วนร่วมของผู้ใช้ ซึ่งท้ายที่สุดแล้วส่งผลกระทบต่อวัตถุประสงค์ทางธุรกิจทั่วโลก การแสวงหาประสิทธิภาพเว็บที่เหมาะสมที่สุดคือการเดินทางอย่างต่อเนื่องสำหรับนักพัฒนาและองค์กรทุกแห่ง

เบื้องหลังการทำงาน เบราว์เซอร์กำลังทำงานอย่างไม่หยุดหย่อนเพื่อเรนเดอร์ส่วนติดต่อผู้ใช้ (UIs) ที่ซับซ้อน ซึ่งประกอบด้วยองค์ประกอบ สไตล์ และสคริปต์จำนวนนับไม่ถ้วน การทำงานที่ซับซ้อนนี้เกี่ยวข้องกับไปป์ไลน์การเรนเดอร์ที่ซับซ้อน ซึ่งบางครั้งการเปลี่ยนแปลงเล็กน้อยอาจทำให้เกิดการคำนวณใหม่เป็นลำดับขั้นไปทั่วทั้งเอกสาร ปรากฏการณ์นี้มักเรียกกันว่า "layout thrashing" หรือ "paint storms" ซึ่งอาจทำให้ประสิทธิภาพลดลงอย่างมาก นำไปสู่ประสบการณ์ผู้ใช้ที่ล่าช้าและไม่น่าดึงดูดใจ ลองนึกภาพเว็บไซต์อีคอมเมิร์ซที่การเพิ่มสินค้าลงในรถเข็นทำให้ทั้งหน้าเว็บมีการปรับเปลี่ยนการจัดวางเล็กน้อย หรือฟีดโซเชียลมีเดียที่การเลื่อนดูเนื้อหาติดขัดและไม่ตอบสนอง สิ่งเหล่านี้เป็นอาการทั่วไปของการเรนเดอร์ที่ไม่มีประสิทธิภาพ

ขอแนะนำ CSS Style Containment ซึ่งเป็นคุณสมบัติ CSS ที่มีประสิทธิภาพและมักถูกใช้งานน้อยเกินไป ออกแบบมาเพื่อเป็นแสงสว่างในการเพิ่มประสิทธิภาพ: นั่นคือคุณสมบัติ contain คุณสมบัติที่เป็นนวัตกรรมนี้ช่วยให้นักพัฒนาสามารถส่งสัญญาณไปยังเบราว์เซอร์ได้อย่างชัดเจนว่าองค์ประกอบที่เฉพาะเจาะจงและองค์ประกอบลูกหลานของมัน สามารถถือเป็นโครงสร้างย่อยการเรนเดอร์อิสระได้ ด้วยวิธีนี้ นักพัฒนาสามารถประกาศ "ความเป็นอิสระในการเรนเดอร์" ของคอมโพเนนต์ ซึ่งจำกัดขอบเขตของการคำนวณใหม่ของการจัดวาง สไตล์ และการวาดภาพ ภายในเอนจิ้นการเรนเดอร์ของเบราว์เซอร์ การแยกนี้ช่วยป้องกันการเปลี่ยนแปลงภายในจากการกระตุ้นการอัปเดตที่กินทรัพยากรมากและกระจายไปทั่วทั้งหน้าเว็บ

แนวคิดหลักเบื้องหลัง contain นั้นเรียบง่ายแต่มีผลกระทบอย่างมาก: โดยการให้คำแนะนำที่ชัดเจนแก่เบราว์เซอร์เกี่ยวกับพฤติกรรมขององค์ประกอบ เราช่วยให้เบราว์เซอร์สามารถตัดสินใจในการเรนเดอร์ได้อย่างมีประสิทธิภาพมากขึ้น แทนที่จะคาดการณ์สถานการณ์ที่เลวร้ายที่สุดและคำนวณใหม่ทั้งหมด เบราว์เซอร์สามารถจำกัดขอบเขตการทำงานเฉพาะองค์ประกอบที่ถูกจำกัดขอบเขตได้อย่างมั่นใจ ซึ่งช่วยเร่งกระบวนการเรนเดอร์และมอบส่วนติดต่อผู้ใช้ที่ราบรื่นและตอบสนองได้ดีขึ้นอย่างมาก นี่ไม่ใช่เพียงการปรับปรุงทางเทคนิคเท่านั้น แต่ยังเป็นความจำเป็นระดับโลก เว็บที่มีประสิทธิภาพช่วยให้ผู้ใช้ในภูมิภาคที่มีการเชื่อมต่ออินเทอร์เน็ตช้าลงหรืออุปกรณ์ที่ประสิทธิภาพน้อยลงยังคงสามารถเข้าถึงและโต้ตอบกับเนื้อหาได้อย่างมีประสิทธิภาพ ส่งเสริมภูมิทัศน์ดิจิทัลที่ครอบคลุมและเท่าเทียมกันมากขึ้น

เส้นทางการทำงานอันเข้มข้นของเบราว์เซอร์: ทำความเข้าใจไปป์ไลน์การเรนเดอร์

เพื่อให้เข้าใจถึงพลังของ contain อย่างแท้จริง การทำความเข้าใจขั้นตอนพื้นฐานที่เบราว์เซอร์ใช้ในการเปลี่ยน HTML, CSS และ JavaScript ให้เป็นพิกเซลบนหน้าจอของคุณเป็นสิ่งสำคัญ กระบวนการนี้เรียกว่า Critical Rendering Path แม้จะถูกทำให้เรียบง่ายลง การทำความเข้าใจขั้นตอนสำคัญจะช่วยระบุจุดที่มักเกิดปัญหาคอขวดด้านประสิทธิภาพได้:

• การสร้าง DOM (Document Object Model): เบราว์เซอร์จะแยกวิเคราะห์ HTML และสร้างโครงสร้างแบบต้นไม้ที่แสดงถึงเนื้อหาและความสัมพันธ์ของเอกสาร
• การสร้าง CSSOM (CSS Object Model): เบราว์เซอร์จะแยกวิเคราะห์ CSS และสร้างโครงสร้างแบบต้นไม้ของสไตล์ที่นำไปใช้กับองค์ประกอบ
• การสร้าง Render Tree: DOM และ CSSOM จะถูกรวมกันเพื่อสร้าง Render Tree ซึ่งมีเฉพาะองค์ประกอบที่มองเห็นได้และสไตล์ที่คำนวณแล้วเท่านั้น นี่คือสิ่งที่จะถูกเรนเดอร์จริง ๆ
• การจัดวาง (Layout/Reflow/Relayout): นี่เป็นหนึ่งในขั้นตอนที่ต้องใช้ทรัพยากรมากที่สุด เบราว์เซอร์จะคำนวณตำแหน่งและขนาดที่แน่นอนของทุกองค์ประกอบที่มองเห็นได้บนหน้าเว็บโดยอิงจาก Render Tree หากขนาดหรือตำแหน่งขององค์ประกอบเปลี่ยนไป หรือหากมีการเพิ่มหรือลบองค์ประกอบใหม่ เบราว์เซอร์มักจะต้องคำนวณการจัดวางใหม่สำหรับส่วนสำคัญ หรือแม้กระทั่งทั้งหมดของหน้าเว็บ การคำนวณใหม่ทั่วโลกนี้เรียกว่า "reflow" หรือ "relayout" และเป็นปัญหาคอขวดด้านประสิทธิภาพที่สำคัญ
• การวาดภาพ (Paint/Repaint): เมื่อกำหนดการจัดวางแล้ว เบราว์เซอร์จะวาด (paint) พิกเซลสำหรับแต่ละองค์ประกอบลงบนหน้าจอ ซึ่งเกี่ยวข้องกับการแปลงสไตล์ที่คำนวณแล้ว (สี, พื้นหลัง, ขอบ, เงา ฯลฯ) ให้เป็นพิกเซลจริง เช่นเดียวกับการจัดวาง การเปลี่ยนแปลงคุณสมบัติทางสายตาขององค์ประกอบสามารถกระตุ้นให้เกิด "repaint" ขององค์ประกอบนั้นและอาจรวมถึงองค์ประกอบที่ทับซ้อนกันด้วย แม้ว่ามักจะใช้ทรัพยากรน้อยกว่า reflow แต่การ repaint บ่อยครั้งหรือขนาดใหญ่อาจยังคงทำให้ประสิทธิภาพลดลงได้
• การจัดองค์ประกอบ (Compositing): เลเยอร์ที่วาดแล้วจะถูกรวม (composite) ในลำดับที่ถูกต้องเพื่อสร้างภาพสุดท้ายบนหน้าจอ

ข้อควรจำที่สำคัญคือการดำเนินการในขั้นตอน Layout และ Paint มักจะเป็นตัวดึงประสิทธิภาพที่สำคัญที่สุด เมื่อใดก็ตามที่มีการเปลี่ยนแปลงใน DOM หรือ CSSOM ที่ส่งผลต่อการจัดวาง (เช่น การเปลี่ยน `width`, `height`, `margin`, `padding`, `display` หรือ `position` ขององค์ประกอบ) เบราว์เซอร์อาจถูกบังคับให้ดำเนินการขั้นตอนการจัดวางใหม่สำหรับหลายองค์ประกอบ ในทำนองเดียวกัน การเปลี่ยนแปลงทางสายตา (เช่น `color`, `background-color`, `box-shadow`) ต้องมีการวาดภาพใหม่ หากไม่มีการจำกัดขอบเขต การอัปเดตเล็กน้อยในคอมโพเนนต์ที่แยกอยู่หนึ่งส่วนสามารถกระตุ้นการคำนวณใหม่ทั้งหมดทั่วทั้งหน้าเว็บโดยไม่จำเป็น ซึ่งทำให้สิ้นเปลืองรอบการประมวลผลอันมีค่า และส่งผลให้เกิดประสบการณ์ผู้ใช้ที่ไม่ราบรื่น

การประกาศอิสรภาพ: เจาะลึกคุณสมบัติ contain

คุณสมบัติ CSS contain ทำหน้าที่เป็นคำแนะนำการปรับแต่งที่สำคัญสำหรับเบราว์เซอร์ มันส่งสัญญาณว่าองค์ประกอบเฉพาะและองค์ประกอบลูกหลานของมันถูกจำกัดขอบเขตในตัวเอง ซึ่งหมายความว่าการจัดวาง สไตล์ และการดำเนินการวาดภาพสามารถเกิดขึ้นได้อย่างอิสระจากส่วนที่เหลือของเอกสาร ซึ่งช่วยให้เบราว์เซอร์สามารถดำเนินการปรับแต่งเป้าหมายได้ ป้องกันการเปลี่ยนแปลงภายในจากการบังคับให้เกิดการคำนวณใหม่ที่กินทรัพยากรมากบนโครงสร้างหน้าเว็บที่ใหญ่ขึ้น

คุณสมบัตินี้รับค่าหลายค่า ซึ่งสามารถรวมกันหรือใช้เป็นค่าแบบย่อได้ โดยแต่ละค่าจะให้ระดับการจำกัดขอบเขตที่แตกต่างกันไป:

• none (ค่าเริ่มต้น): ไม่มีข้อจำกัดขอบเขต การเปลี่ยนแปลงภายในองค์ประกอบสามารถส่งผลกระทบต่อทั้งหน้าเว็บได้
• layout: จำกัดการเปลี่ยนแปลงการจัดวาง
• paint: จำกัดการเปลี่ยนแปลงการวาดภาพ
• size: ระบุว่าขนาดขององค์ประกอบนั้นคงที่
• style: จำกัดการทำให้สไตล์ไม่ถูกต้อง
• content: รูปแบบย่อสำหรับ layout และ paint
• strict: รูปแบบย่อสำหรับ layout, paint, size และ style

มาสำรวจค่าแต่ละค่าเหล่านี้โดยละเอียดเพื่อทำความเข้าใจประโยชน์และผลกระทบเฉพาะของมัน

contain: layout; – การแยกรูปทรงเรขาคณิตอย่างเชี่ยวชาญ

เมื่อคุณใช้ contain: layout; กับองค์ประกอบ คุณกำลังบอกเบราว์เซอร์โดยพื้นฐานว่า: "การเปลี่ยนแปลงการจัดวางขององค์ประกอบลูกของฉันจะไม่ส่งผลกระทบต่อการจัดวางของสิ่งใด ๆ ภายนอกฉัน รวมถึงองค์ประกอบบรรพบุรุษหรือพี่น้อง" นี่คือการประกาศที่มีประสิทธิภาพอย่างไม่น่าเชื่อ เนื่องจากช่วยป้องกันการเปลี่ยนแปลงการจัดวางภายในจากการกระตุ้นให้เกิด reflow ทั่วโลก

วิธีการทำงาน: ด้วย contain: layout; เบราว์เซอร์สามารถคำนวณการจัดวางสำหรับองค์ประกอบที่ถูกจำกัดขอบเขตและองค์ประกอบลูกหลานได้อย่างอิสระ หากองค์ประกอบลูกเปลี่ยนขนาด องค์ประกอบแม่ (องค์ประกอบที่ถูกจำกัดขอบเขต) จะยังคงรักษำตำแหน่งและขนาดเดิมที่สัมพันธ์กับส่วนที่เหลือของเอกสาร การคำนวณการจัดวางจะถูกแยกออกจากกันอย่างมีประสิทธิภาพภายในขอบเขตขององค์ประกอบที่ถูกจำกัดขอบเขต

ประโยชน์:

• ลดขอบเขตการ Reflow: ข้อได้เปรียบหลักคือการลดพื้นที่ที่เบราว์เซอร์จำเป็นต้องคำนวณใหม่ระหว่างการเปลี่ยนแปลงการจัดวางอย่างมีนัยสำคัญ ซึ่งหมายถึงการใช้ CPU น้อยลงและเวลาเรนเดอร์ที่เร็วขึ้น
• การจัดวางที่คาดเดาได้: ช่วยรักษาการจัดวางหน้าโดยรวมให้คงที่ แม้ว่าเนื้อหาแบบไดนามิกหรือแอนิเมชันจะทำให้เกิดการเปลี่ยนแปลงภายในคอมโพเนนต์ก็ตาม

กรณีการใช้งาน:

• คอมโพเนนต์ UI อิสระ: ลองนึกถึงคอมโพเนนต์การตรวจสอบความถูกต้องของฟอร์มที่ซับซ้อน ซึ่งข้อความแสดงข้อผิดพลาดอาจปรากฏขึ้นหรือหายไป ทำให้การจัดวางภายในของฟอร์มเปลี่ยนไป การใช้ contain: layout; กับคอนเทนเนอร์ฟอร์มจะช่วยให้มั่นใจว่าการเปลี่ยนแปลงเหล่านี้ไม่ส่งผลกระทบต่อส่วนท้ายหรือแถบด้านข้าง
• ส่วนที่ขยาย/ยุบได้: หากคุณมีคอมโพเนนต์สไตล์ accordion ที่เนื้อหาขยายหรือยุบได้ การใช้ contain: layout; กับแต่ละส่วนสามารถป้องกันไม่ให้การจัดวางทั้งหน้าเว็บถูกประเมินใหม่เมื่อความสูงของส่วนเปลี่ยนไป
• วิดเจ็ตและการ์ด: บนแดชบอร์ดหรือหน้าแสดงรายการสินค้า ซึ่งแต่ละรายการเป็นบัตรหรือวิดเจ็ตอิสระ หากรูปภาพโหลดช้าหรือเนื้อหาปรับเปลี่ยนแบบไดนามิกภายในบัตรหนึ่ง การใช้ contain: layout; กับบัตรนั้นจะป้องกันไม่ให้บัตรที่อยู่ใกล้เคียงหรือโครงสร้างกริดโดยรวมมีการจัดวางใหม่โดยไม่จำเป็น

ข้อควรพิจารณา:

• องค์ประกอบที่ถูกจำกัดขอบเขตจะต้องสร้าง context การจัดรูปแบบบล็อกใหม่ คล้ายกับองค์ประกอบที่มี overflow: hidden; หรือ display: flex;
• แม้ว่าการเปลี่ยนแปลงการจัดวางภายในจะถูกจำกัดขอบเขต แต่อย่างไรก็ตามองค์ประกอบนั้นอาจยังคงปรับขนาดได้หากเนื้อหาของมันกำหนดขนาดใหม่ และไม่ได้ใช้ contain: size; ด้วย
• สำหรับการจำกัดขอบเขตที่มีประสิทธิภาพ องค์ประกอบควรมีขนาดที่ชัดเจนหรือคาดเดาได้ แม้ว่าจะไม่ได้บังคับใช้อย่างเข้มงวดโดย contain: size; ก็ตาม

contain: paint; – การจำกัดการอัปเดตภาพ

เมื่อคุณใช้ contain: paint; กับองค์ประกอบ คุณกำลังแจ้งให้เบราว์เซอร์ทราบว่า: "ไม่มีสิ่งใดในองค์ประกอบนี้จะถูกวาดออกนอกขอบเขตของมัน ยิ่งไปกว่านั้น หากองค์ประกอบนี้อยู่นอกหน้าจอ คุณไม่จำเป็นต้องวาดเนื้อหาของมันเลย" คำแนะนำนี้ช่วยเพิ่มประสิทธิภาพในขั้นตอนการวาดภาพของไปป์ไลน์การเรนเดอร์ได้อย่างมาก

วิธีการทำงาน: ค่านี้จะบอกเบราว์เซอร์สองสิ่งสำคัญ ประการแรก มันหมายถึงเนื้อหาขององค์ประกอบจะถูกตัด (clipped) ไปยังกล่องขอบเขตของมัน ประการที่สอง ที่สำคัญกว่าสำหรับประสิทธิภาพ มันช่วยให้เบราว์เซอร์สามารถทำการ "culling" ได้อย่างมีประสิทธิภาพ หากองค์ประกอบนั้นอยู่นอกพอร์ตการแสดงผล (off-screen) หรือถูกซ่อนโดยองค์ประกอบอื่น เบราว์เซอร์จะรู้ว่าไม่จำเป็นต้องวาดองค์ประกอบลูกหลานใด ๆ ซึ่งช่วยประหยัดเวลาในการประมวลผลได้อย่างมาก

ประโยชน์:

• ลดขอบเขตการ Repaint: จำกัดพื้นที่ที่จำเป็นต้องวาดภาพใหม่ให้อยู่ภายในขอบเขตขององค์ประกอบ
• การ Culling ที่มีประสิทธิภาพ: ช่วยให้เบราว์เซอร์ข้ามการวาดภาพโครงสร้างย่อยทั้งหมดของ DOM หากองค์ประกอบที่บรรจุอยู่ไม่สามารถมองเห็นได้ ซึ่งมีประโยชน์อย่างยิ่งสำหรับรายการยาว ๆ, แครูเซล หรือองค์ประกอบ UI ที่ซ่อนอยู่
• ประหยัดหน่วยความจำ: การไม่วาดเนื้อหาที่อยู่นอกหน้าจอช่วยให้เบราว์เซอร์สามารถประหยัดหน่วยความจำได้ด้วย

กรณีการใช้งาน:

• รายการเลื่อนไม่สิ้นสุด/เนื้อหาเสมือนจริง: เมื่อต้องจัดการกับรายการหลายพันรายการ ซึ่งมีเพียงส่วนน้อยเท่านั้นที่มองเห็นได้ในแต่ละช่วงเวลา การใช้ contain: paint; กับแต่ละรายการ (หรือคอนเทนเนอร์สำหรับชุดของรายการ) จะช่วยให้มั่นใจว่ามีเพียงรายการที่มองเห็นได้เท่านั้นที่ถูกวาดภาพ
• โมดอล/แถบด้านข้างที่อยู่นอกหน้าจอ: หากคุณมีกล่องโต้ตอบโมดอล, แถบนำทางด้านข้าง หรือองค์ประกอบ UI ใดๆ ที่ซ่อนอยู่ตั้งแต่แรกแล้วเลื่อนเข้าสู่การมองเห็น การใช้ contain: paint; กับมันสามารถป้องกันไม่ให้เบราว์เซอร์ทำงานวาดภาพที่ไม่จำเป็นเมื่ออยู่นอกหน้าจอ
• แกลเลอรีรูปภาพที่มี Lazy Loading: สำหรับรูปภาพที่อยู่ไกลลงไปในหน้า การใช้ contain: paint; กับคอนเทนเนอร์ของรูปภาพเหล่านั้นสามารถช่วยให้มั่นใจได้ว่าจะไม่ถูกวาดภาพจนกว่าจะเลื่อนเข้ามาอยู่ในมุมมอง

ข้อควรพิจารณา:

• เพื่อให้ contain: paint; มีประสิทธิภาพ องค์ประกอบจะต้องมีขนาดที่กำหนด (ไม่ว่าจะเป็นแบบระบุชัดเจนหรือคำนวณโดยปริยาย) หากไม่มีขนาด เบราว์เซอร์จะไม่สามารถกำหนดกล่องขอบเขตสำหรับการตัด (clipping) หรือการคัดทิ้ง (culling) ได้
• โปรดทราบว่าเนื้อหา *จะ* ถูกตัด หากมันล้นเกินขอบเขตขององค์ประกอบ นี่คือพฤติกรรมที่ตั้งใจไว้ และอาจเป็นข้อผิดพลาดได้หากไม่ได้จัดการ

contain: size; – การรับประกันความเสถียรของมิติ

การใช้ contain: size; กับองค์ประกอบเป็นการประกาศแก่เบราว์เซอร์ว่า: "ขนาดของฉันคงที่และจะไม่เปลี่ยนแปลง ไม่ว่าเนื้อหาภายในของฉันจะเป็นอย่างไรหรือมีการเปลี่ยนแปลงอย่างไร" นี่เป็นคำแนะนำที่มีประสิทธิภาพเนื่องจากช่วยลดความจำเป็นที่เบราว์เซอร์จะต้องคำนวณขนาดขององค์ประกอบ ซึ่งช่วยให้การคำนวณการจัดวางสำหรับองค์ประกอบบรรพบุรุษและพี่น้องมีความเสถียรมากขึ้น

วิธีการทำงาน: เมื่อใช้ contain: size; เบราว์เซอร์จะถือว่ามิติขององค์ประกอบนั้นไม่เปลี่ยนแปลง มันจะไม่ทำการคำนวณขนาดใด ๆ สำหรับองค์ประกอบนี้โดยอิงจากเนื้อหาหรือลูก ๆ หากความกว้างหรือความสูงขององค์ประกอบไม่ได้ถูกกำหนดไว้อย่างชัดเจนโดย CSS เบราว์เซอร์จะถือว่ามีความกว้างและความสูงเป็นศูนย์ ดังนั้น เพื่อให้คุณสมบัตินี้มีประสิทธิภาพและเป็นประโยชน์ องค์ประกอบจะต้องมีขนาดที่แน่นอนซึ่งกำหนดผ่านคุณสมบัติ CSS อื่น ๆ (เช่น `width`, `height`, `min-height`)

ประโยชน์:

• ขจัดการคำนวณขนาดใหม่: เบราว์เซอร์ประหยัดเวลาโดยไม่ต้องคำนวณขนาดขององค์ประกอบ ซึ่งเป็นข้อมูลสำคัญสำหรับขั้นตอนการจัดวาง
• เสริมการจำกัดขอบเขตการจัดวาง: เมื่อใช้ร่วมกับ `contain: layout;` มันจะช่วยตอกย้ำคำสัญญาว่าการมีอยู่ขององค์ประกอบนี้จะไม่ทำให้เกิดการคำนวณการจัดวางใหม่จากองค์ประกอบด้านบน
• ป้องกันการเปลี่ยนแปลงการจัดวาง (CLS Improvement): สำหรับเนื้อหาที่โหลดแบบไดนามิก (เช่น รูปภาพหรือโฆษณา) การประกาศขนาดคงที่ด้วย contain: size; บนคอนเทนเนอร์จะช่วยป้องกัน Cumulative Layout Shift (CLS) ซึ่งเป็นเมตริก Core Web Vital ที่สำคัญ พื้นที่ถูกสงวนไว้แม้ก่อนที่เนื้อหาจะโหลด

กรณีการใช้งาน:

• ช่องโฆษณา: หน่วยโฆษณามักจะมีขนาดคงที่ การใช้ contain: size; กับคอนเทนเนอร์โฆษณาจะช่วยให้มั่นใจว่าแม้เนื้อหาโฆษณาจะแตกต่างกัน ก็จะไม่ส่งผลกระทบต่อการจัดวางของหน้าเว็บ
• ตัวยึดตำแหน่งรูปภาพ: ก่อนที่รูปภาพจะโหลด คุณสามารถใช้องค์ประกอบตัวยึดตำแหน่งที่มี contain: size; เพื่อสงวนพื้นที่ไว้ ป้องกันการเปลี่ยนแปลงการจัดวางเมื่อรูปภาพปรากฏขึ้นในที่สุด
• เครื่องเล่นวิดีโอ: หากเครื่องเล่นวิดีโอมีอัตราส่วนภาพหรือมิติคงที่ การใช้ contain: size; บน wrapper จะช่วยให้มั่นใจว่าเนื้อหาของมันไม่ส่งผลกระทบต่อการจัดวางโดยรอบ

ข้อควรพิจารณา:

• สำคัญต่อการกำหนดขนาดอย่างชัดเจน: หากองค์ประกอบไม่มี `width` หรือ `height` (หรือ `min-height`/`max-height` ที่สามารถระบุขนาดได้) อย่างชัดเจน `contain: size;` จะทำให้มันยุบตัวเป็นศูนย์มิติ ซึ่งอาจทำให้เนื้อหาซ่อนไปได้
• เนื้อหาล้น: หากเนื้อหาภายในองค์ประกอบเติบโตแบบไดนามิกเกินขนาดที่ประกาศไว้ มันจะล้นและอาจถูกตัดออกหรือถูกบดบัง เว้นแต่จะมีการตั้งค่า `overflow: visible;` อย่างชัดเจน (ซึ่งอาจทำให้ประโยชน์บางอย่างของการจำกัดขอบเขตหายไป)
• ไม่ค่อยมีการใช้งานเดี่ยวๆ มักจะใช้ร่วมกับ `layout` และ/หรือ `paint`

contain: style; – การจำกัดการคำนวณสไตล์ใหม่

การใช้ contain: style; จะบอกเบราว์เซอร์ว่า: "การเปลี่ยนแปลงสไตล์ขององค์ประกอบลูกหลานของฉันจะไม่ส่งผลกระทบต่อสไตล์ที่คำนวณได้ขององค์ประกอบบรรพบุรุษหรือพี่น้อง" นี่คือการแยกการทำให้สไตล์ไม่ถูกต้องและการคำนวณใหม่ ป้องกันไม่ให้สิ่งเหล่านี้เผยแพร่ขึ้นไปบน DOM tree

วิธีการทำงาน: เบราว์เซอร์มักจะต้องประเมินสไตล์ใหม่สำหรับองค์ประกอบบรรพบุรุษหรือพี่น้องขององค์ประกอบเมื่อสไตล์ขององค์ประกอบลูกหลานเปลี่ยนไป สิ่งนี้อาจเกิดขึ้นได้เนื่องจากการรีเซ็ตตัวนับ CSS คุณสมบัติ CSS ที่พึ่งพาข้อมูลซับทรี (เช่น `first-line` หรือ `first-letter` pseudo-elements ที่ส่งผลต่อการจัดสไตล์ข้อความของพาเรนต์) หรือเอฟเฟกต์ `:hover` ที่ซับซ้อนซึ่งเปลี่ยนสไตล์พาเรนต์ contain: style; ป้องกันการพึ่งพาสไตล์ที่ส่งผลกระทบขึ้นไปดังกล่าว

ประโยชน์:

• ขอบเขตสไตล์ที่แคบลง: จำกัดขอบเขตของการคำนวณสไตล์ใหม่ให้อยู่ภายในองค์ประกอบที่ถูกจำกัดขอบเขต ซึ่งช่วยลดค่าใช้จ่ายด้านประสิทธิภาพที่เกี่ยวข้องกับการทำให้สไตล์ไม่ถูกต้อง
• การประยุกต์ใช้สไตล์ที่คาดเดาได้: ช่วยให้มั่นใจว่าการเปลี่ยนแปลงสไตล์ภายในคอมโพเนนต์จะไม่ทำให้ส่วนอื่น ๆ ของหน้าเว็บที่ไม่เกี่ยวข้องเกิดความเสียหายหรือเปลี่ยนแปลงรูปลักษณ์โดยไม่ตั้งใจ

กรณีการใช้งาน:

• คอมโพเนนต์ที่ซับซ้อนพร้อมธีมแบบไดนามิก: ในระบบการออกแบบที่คอมโพเนนต์อาจมีตรรกะการใช้ธีมภายในของตนเอง หรือสไตล์ที่ขึ้นอยู่กับสถานะที่เปลี่ยนแปลงบ่อย การใช้ contain: style; สามารถช่วยให้มั่นใจว่าการเปลี่ยนแปลงเหล่านี้อยู่ภายในขอบเขต
• วิดเจ็ตของบุคคลที่สาม: หากคุณรวมสคริปต์หรือคอมโพเนนต์ของบุคคลที่สามที่อาจแทรกสไตล์ของตนเอง หรือเปลี่ยนแปลงสไตล์แบบไดนามิก การจำกัดขอบเขตด้วย contain: style; สามารถป้องกันสไตล์ภายนอกเหล่านี้จากการส่งผลกระทบต่อสไตล์ชีทหลักของแอปพลิเคชันของคุณโดยไม่คาดคิด

ข้อควรพิจารณา:

• contain: style; อาจเป็นค่าที่ใช้น้อยที่สุดเมื่อใช้แยกกัน เนื่องจากผลกระทบของมันละเอียดอ่อนกว่าและเฉพาะเจาะจงกับการโต้ตอบของ CSS ที่เฉพาะเจาะจงมาก
• มันตั้งค่าองค์ประกอบโดยนัยให้มีการจำกัด `counter` และ `font` ซึ่งหมายความว่าตัวนับ CSS ภายในองค์ประกอบจะถูกรีเซ็ต และการสืบทอดคุณสมบัติฟอนต์อาจได้รับผลกระทบ นี่อาจเป็นการเปลี่ยนแปลงที่ทำให้เกิดปัญหาได้หากการออกแบบของคุณพึ่งพฤติกรรมตัวนับหรือฟอนต์ทั่วโลก
• การทำความเข้าใจผลกระทบของมันมักจะต้องใช้ความรู้เชิงลึกเกี่ยวกับการสืบทอด CSS และกฎการคำนวณ

contain: content; – รูปแบบย่อที่ใช้งานได้จริง (Layout + Paint)

ค่า contain: content; เป็นรูปแบบย่อที่สะดวกซึ่งรวมประเภทการจำกัดขอบเขตที่มีประโยชน์บ่อยที่สุดสองประเภทเข้าด้วยกัน: layout และ paint ซึ่งเทียบเท่ากับการเขียน contain: layout paint; สิ่งนี้ทำให้เป็นทางเลือกเริ่มต้นที่ยอดเยี่ยมสำหรับคอมโพเนนต์ UI ทั่วไปหลายชนิด

วิธีการทำงาน: ด้วยการใช้ `content` คุณกำลังบอกเบราว์เซอร์ว่าการเปลี่ยนแปลงการจัดวางภายในขององค์ประกอบจะไม่ส่งผลกระทบต่อสิ่งใดภายนอก และการดำเนินการวาดภาพภายในของมันก็ถูกจำกัดขอบเขตเช่นกัน ซึ่งช่วยให้สามารถทำการ culling ได้อย่างมีประสิทธิภาพหากองค์ประกอบอยู่นอกหน้าจอ นี่คือความสมดุลที่แข็งแกร่งระหว่างประโยชน์ด้านประสิทธิภาพและผลข้างเคียงที่อาจเกิดขึ้น

ประโยชน์:

• การปรับปรุงประสิทธิภาพในวงกว้าง: จัดการกับปัญหาคอขวดด้านประสิทธิภาพที่พบบ่อยที่สุดสองประการ (การจัดวางและการวาดภาพ) ด้วยการประกาศเพียงครั้งเดียว
• ค่าเริ่มต้นที่ปลอดภัย: โดยทั่วไปปลอดภัยกว่าที่จะใช้กว่า `strict` เพราะไม่ได้บังคับใช้การจำกัดขอบเขต `size` ซึ่งหมายความว่าองค์ประกอบยังคงสามารถขยายหรือย่อขนาดได้ตามเนื้อหา ทำให้มีความยืดหยุ่นมากขึ้นสำหรับ UI แบบไดนามิก
• โค้ดที่เรียบง่ายขึ้น: ลดความซับซ้อนเมื่อเทียบกับการประกาศ `layout` และ `paint` แยกกัน

กรณีการใช้งาน:

• รายการแต่ละรายการ: ในรายการบทความ สินค้า หรือข้อความแบบไดนามิก การใช้ contain: content; กับแต่ละรายการจะช่วยให้มั่นใจว่าการเพิ่ม/ลบรายการ หรือการเปลี่ยนเนื้อหาภายใน (เช่น รูปภาพกำลังโหลด, คำอธิบายขยาย) จะกระตุ้นการจัดวางและการวาดภาพสำหรับรายการนั้นโดยเฉพาะ ไม่ใช่ทั้งรายการหรือหน้าเว็บ
• วิดเจ็ตบนแดชบอร์ด: วิดเจ็ตแต่ละรายการบนแดชบอร์ดสามารถกำหนด contain: content; ได้ ซึ่งช่วยให้มั่นใจได้ถึงการพึ่งพาตนเอง
• การ์ดโพสต์บล็อก: สำหรับกริดสรุปโพสต์บล็อกที่แต่ละการ์ดมีรูปภาพ, ชื่อเรื่อง และบทคัดย่อ contain: content; สามารถแยกการเรนเดอร์ออกจากกันได้

ข้อควรพิจารณา:

• แม้จะปลอดภัยโดยทั่วไป แต่โปรดจำไว้ว่าการจำกัดขอบเขตแบบ `paint` หมายถึงเนื้อหาจะถูกตัดหากมันล้นเกินขอบเขตขององค์ประกอบ
• องค์ประกอบจะยังคงปรับขนาดตามเนื้อหาของมัน ดังนั้นหากคุณต้องการขนาดที่คงที่อย่างแท้จริงเพื่อป้องกันการเปลี่ยนแปลงการจัดวาง คุณจะต้องเพิ่ม `contain: size;` อย่างชัดเจน หรือจัดการขนาดด้วย CSS

contain: strict; – การแยกขอบเขตขั้นสูงสุด (Layout + Paint + Size + Style)

contain: strict; เป็นรูปแบบการจำกัดขอบเขตที่รุนแรงที่สุด เทียบเท่ากับการประกาศ contain: layout paint size style; เมื่อคุณใช้ contain: strict; คุณกำลังให้คำมั่นสัญญาที่แข็งแกร่งมากต่อเบราว์เซอร์ว่า: "องค์ประกอบนี้ถูกแยกออกโดยสมบูรณ์ สไตล์ การจัดวาง การวาดภาพ และแม้แต่ขนาดของมันเอง ก็เป็นอิสระจากสิ่งใด ๆ ภายนอก"

วิธีการทำงาน: ค่านี้จะให้ข้อมูลแก่เบราว์เซอร์มากที่สุดเท่าที่จะเป็นไปได้เพื่อเพิ่มประสิทธิภาพการเรนเดอร์ มันจะถือว่าขนาดขององค์ประกอบนั้นคงที่ (และจะยุบตัวเป็นศูนย์หากไม่ได้ตั้งค่าไว้อย่างชัดเจน) การวาดภาพจะถูกตัด การจัดวางเป็นอิสระ และสไตล์ของมันไม่ส่งผลกระทบต่อองค์ประกอบบรรพบุรุษ ซึ่งช่วยให้เบราว์เซอร์สามารถข้ามการคำนวณเกือบทั้งหมดที่เกี่ยวข้องกับองค์ประกอบนี้เมื่อพิจารณาส่วนที่เหลือของเอกสาร

ประโยชน์:

• ประสิทธิภาพสูงสุด: มอบการปรับปรุงประสิทธิภาพที่เป็นไปได้มากที่สุดด้วยการแยกงานเรนเดอร์ออกอย่างสมบูรณ์
• คาดเดาได้แม่นยำที่สุด: ทำให้มั่นใจว่าองค์ประกอบจะไม่ทำให้เกิด reflow หรือ repaint ที่ไม่คาดคิดกับส่วนที่เหลือของหน้า
• เหมาะสำหรับคอมโพเนนต์ที่เป็นอิสระอย่างแท้จริง: เหมาะอย่างยิ่งสำหรับคอมโพเนนต์ที่ถูกจำกัดขอบเขตในตัวเองอย่างแท้จริง และทราบขนาดของมันหรือควบคุมได้อย่างแม่นยำ

กรณีการใช้งาน:

• แผนที่อินเทอร์แอคทีฟที่ซับซ้อน: คอมโพเนนต์แผนที่ที่โหลดไทล์และเครื่องหมายแบบไดนามิก โดยที่ขนาดของมันคงที่บนหน้า
• เครื่องเล่นวิดีโอหรือโปรแกรมแก้ไขแบบกำหนดเอง: ที่พื้นที่เครื่องเล่นมีขนาดคงที่และองค์ประกอบ UI ภายในมีการเปลี่ยนแปลงบ่อยครั้งโดยไม่ส่งผลกระทบต่อหน้าเว็บโดยรอบ
• Canvas เกม: สำหรับเกมบนเว็บที่เรนเดอร์บนองค์ประกอบ canvas ที่มีขนาดคงที่ภายในเอกสาร
• กริดเสมือนจริงที่ปรับแต่งอย่างสูง: ในสถานการณ์ที่ทุกเซลล์ในกริดข้อมูลขนาดใหญ่มีขนาดและถูกจัดการอย่างเข้มงวด

ข้อควรพิจารณา:

• ต้องกำหนดขนาดอย่างชัดเจน: เนื่องจากมี `contain: size;` องค์ประกอบ *ต้อง* มี `width` และ `height` ที่แน่นอน (หรือคุณสมบัติการกำหนดขนาดอื่นๆ) หากไม่มี มันจะยุบตัวเป็นศูนย์ ทำให้เนื้อหาไม่ปรากฏ นี่คือข้อผิดพลาดที่พบบ่อยที่สุด
• การตัดเนื้อหา: เนื่องจากการจำกัดขอบเขตแบบ `paint` ถูกรวมอยู่ด้วย เนื้อหาใดๆ ที่ล้นเกินขนาดที่ประกาศไว้จะถูกตัดออก
• อาจเกิดปัญหาที่ซ่อนอยู่: เพราะมันมีความรุนแรงมาก พฤติกรรมที่ไม่คาดคิดอาจเกิดขึ้นได้หากคอมโพเนนต์ไม่เป็นอิสระตามที่คาดไว้ การทดสอบอย่างละเอียดจึงเป็นสิ่งสำคัญ
• ความยืดหยุ่นน้อยลง: เนื่องจากการจำกัด `size` ทำให้ไม่เหมาะกับคอมโพเนนต์ที่มีขนาดปรับเปลี่ยนตามเนื้อหาโดยธรรมชาติ

การใช้งานจริง: การยกระดับประสบการณ์ผู้ใช้ทั่วโลก

ความงดงามของการจำกัดขอบเขต CSS อยู่ที่ความสามารถในการนำไปใช้จริงกับส่วนติดต่อผู้ใช้เว็บที่หลากหลาย ซึ่งนำไปสู่ประโยชน์ด้านประสิทธิภาพที่เป็นรูปธรรมที่ช่วยปรับปรุงประสบการณ์ผู้ใช้ทั่วโลก มาสำรวจสถานการณ์ทั่วไปบางอย่างที่ contain สามารถสร้างความแตกต่างได้อย่างมีนัยสำคัญ:

การเพิ่มประสิทธิภาพรายการเลื่อนและกริดแบบไม่สิ้นสุด

แอปพลิเคชันเว็บสมัยใหม่จำนวนมาก ตั้งแต่ฟีดโซเชียลมีเดียไปจนถึงรายการสินค้าอีคอมเมิร์ซ ใช้การเลื่อนไม่สิ้นสุดหรือรายการเสมือนจริงเพื่อแสดงเนื้อหาจำนวนมหาศาล หากไม่มีการปรับแต่งที่เหมาะสม การเพิ่มรายการใหม่ลงในรายการดังกล่าว หรือแม้แต่เพียงแค่เลื่อนดูรายการ ก็สามารถกระตุ้นให้เกิดการจัดวางและการวาดภาพอย่างต่อเนื่องและสิ้นเปลืองทรัพยากรสำหรับองค์ประกอบที่เข้าและออกจากพอร์ตการมองเห็น ซึ่งส่งผลให้เกิดความกระตุกและประสบการณ์ผู้ใช้ที่น่าหงุดหงิด โดยเฉพาะบนอุปกรณ์มือถือหรือเครือข่ายที่ช้ากว่าซึ่งพบได้ทั่วไปในภูมิภาคต่าง ๆ ทั่วโลก

วิธีแก้ไขด้วย contain: การใช้ contain: content; (หรือ `contain: layout paint;`) กับแต่ละรายการในลิสต์ (เช่น องค์ประกอบ `<li>` ภายใน `<ul>` หรือองค์ประกอบ `<div>` ในกริด) มีประสิทธิภาพสูง ซึ่งจะบอกเบราว์เซอร์ว่าการเปลี่ยนแปลงภายในรายการเดียว (เช่น รูปภาพกำลังโหลด, ข้อความขยาย) จะไม่ส่งผลกระทบต่อการจัดวางของรายการอื่น หรือคอนเทนเนอร์การเลื่อนโดยรวม

            .list-item {
  contain: content; /* Shorthand for layout and paint */
  /* Add other necessary styling like display, width, height for predictable sizing */
}

            

              
                Copy
              
            
          

ประโยชน์: เบราว์เซอร์สามารถจัดการการเรนเดอร์รายการที่มองเห็นได้อย่างมีประสิทธิภาพ เมื่อรายการเลื่อนเข้าสู่มุมมอง จะมีการคำนวณเฉพาะการจัดวางและการวาดภาพของรายการนั้นเท่านั้น และเมื่อเลื่อนออกไป เบราว์เซอร์จะรู้ว่าสามารถข้ามการเรนเดอร์ได้อย่างปลอดภัยโดยไม่ส่งผลกระทบต่อสิ่งอื่นใด สิ่งนี้นำไปสู่การเลื่อนที่ราบรื่นขึ้นอย่างเห็นได้ชัด และลดการใช้หน่วยความจำ ทำให้แอปพลิเคชันตอบสนองได้ดีขึ้นมากและเข้าถึงได้ง่ายขึ้นสำหรับผู้ใช้ที่มีเงื่อนไขฮาร์ดแวร์และเครือข่ายที่แตกต่างกันทั่วโลก

การจำกัดขอบเขตวิดเจ็ตและบัตร UI อิสระ

แดชบอร์ด, พอร์ทัลข่าว และแอปพลิเคชันเว็บจำนวนมากถูกสร้างขึ้นโดยใช้วิธีการแบบโมดูลาร์ ซึ่งมี "วิดเจ็ต" หรือ "การ์ด" อิสระหลายรายการที่แสดงข้อมูลประเภทต่าง ๆ วิดเจ็ตแต่ละรายการอาจมีสถานะภายใน, เนื้อหาแบบไดนามิก หรือองค์ประกอบเชิงโต้ตอบของตนเอง หากไม่มีการจำกัดขอบเขต การอัปเดตในวิดเจ็ตหนึ่ง (เช่น กราฟกำลังเคลื่อนไหว, ข้อความแจ้งเตือนปรากฏขึ้น) อาจกระตุ้นให้เกิดการจัดวางใหม่หรือการวาดภาพใหม่ทั่วทั้งแดชบอร์ดโดยไม่ตั้งใจ ซึ่งนำไปสู่ความกระตุกที่สังเกตเห็นได้

วิธีแก้ไขด้วย contain: ใช้ contain: content; กับวิดเจ็ตระดับบนสุดหรือคอนเทนเนอร์บัตรแต่ละรายการ

            .dashboard-widget {
  contain: content;
  /* Ensure defined dimensions or flexible sizing that doesn't cause external reflows */
}

.product-card {
  contain: content;
  /* Define consistent sizing or use flex/grid for stable layout */
}

            

              
                Copy
              
            
          

ประโยชน์: เมื่อวิดเจ็ตแต่ละรายการอัปเดต การดำเนินการเรนเดอร์จะถูกจำกัดอยู่ภายในขอบเขตของมัน เบราว์เซอร์สามารถข้ามการประเมินการจัดวางและการวาดภาพใหม่สำหรับวิดเจ็ตอื่น ๆ หรือโครงสร้างแดชบอร์ดหลักได้อย่างมั่นใจ ซึ่งส่งผลให้ UI มีประสิทธิภาพสูงและเสถียร โดยที่การอัปเดตแบบไดนามิกรู้สึกราบรื่น ไม่ว่าความซับซ้อนของหน้าโดยรวมจะเป็นอย่างไร ซึ่งเป็นประโยชน์ต่อผู้ใช้ที่โต้ตอบกับการแสดงข้อมูลที่ซับซ้อนหรือฟีดข่าวทั่วโลก

การจัดการเนื้อหานอกหน้าจออย่างมีประสิทธิภาพ

แอปพลิเคชันเว็บจำนวนมากใช้องค์ประกอบที่ซ่อนอยู่แต่แรกเริ่ม แล้วจึงเปิดเผยหรือทำให้เคลื่อนไหวเข้ามาในมุมมอง เช่น กล่องโต้ตอบแบบโมดอล เมนูนำทางแบบ off-canvas หรือส่วนที่ขยายได้ แม้ว่าองค์ประกอบเหล่านี้จะถูกซ่อนอยู่ (เช่น ด้วย `display: none;` หรือ `visibility: hidden;`) แต่ก็ไม่ได้ใช้ทรัพยากรในการเรนเดอร์ อย่างไรก็ตาม หากเพียงแค่วางตำแหน่งไว้นอกหน้าจอหรือทำให้โปร่งใส (เช่น ใช้ `left: -9999px;` หรือ `opacity: 0;`) เบราว์เซอร์อาจยังคงทำการคำนวณการจัดวางและการวาดภาพสำหรับองค์ประกอบเหล่านั้น ซึ่งเป็นการสิ้นเปลืองทรัพยากร

วิธีแก้ไขด้วย contain: ใช้ contain: paint; กับองค์ประกอบที่อยู่นอกหน้าจอเหล่านี้ ตัวอย่างเช่น กล่องโต้ตอบโมดอลที่เลื่อนเข้ามาจากทางขวา:

            .modal-dialog {
  position: fixed;
  right: -100vw; /* Initially off-screen */
  width: 100vw;
  height: 100vh;
  contain: paint; /* Tell the browser it's okay to cull this if not visible */
  transition: right 0.3s ease-out;
}

.modal-dialog.is-visible {
  right: 0;
}

            

              
                Copy
              
            
          

ประโยชน์: ด้วย contain: paint; เบราว์เซอร์จะได้รับคำสั่งอย่างชัดเจนว่าเนื้อหาของกล่องโต้ตอบโมดอลจะไม่ถูกวาดภาพหากองค์ประกอบนั้นอยู่นอกพอร์ตการมองเห็น ซึ่งหมายความว่าในขณะที่โมดอลอยู่นอกหน้าจอ เบราว์เซอร์จะหลีกเลี่ยงรอบการวาดภาพที่ไม่จำเป็นสำหรับโครงสร้างภายในที่ซับซ้อนของมัน ซึ่งนำไปสู่การโหลดหน้าเริ่มต้นที่เร็วขึ้นและการเปลี่ยนผ่านที่ราบรื่นขึ้นเมื่อโมดอลปรากฏขึ้น สิ่งนี้สำคัญอย่างยิ่งสำหรับแอปพลิเคชันที่ให้บริการผู้ใช้บนอุปกรณ์ที่มีพลังประมวลผลจำกัด

การเพิ่มประสิทธิภาพเนื้อหาบุคคลที่สามที่ฝังไว้

การรวมเนื้อหาของบุคคลที่สาม เช่น หน่วยโฆษณา, วิดเจ็ตโซเชียลมีเดีย หรือเครื่องเล่นวิดีโอที่ฝังไว้ (ซึ่งมักจะส่งผ่าน `<iframe>`) อาจเป็นแหล่งที่มาสำคัญของปัญหาด้านประสิทธิภาพ สคริปต์และเนื้อหาภายนอกเหล่านี้อาจคาดเดาไม่ได้ มักจะใช้ทรัพยากรจำนวนมากในการเรนเดอร์ของตัวเอง และในบางกรณี อาจทำให้เกิด reflows หรือ repaints บนหน้าโฮสต์ได้ เมื่อพิจารณาถึงลักษณะทั่วโลกของบริการเว็บ องค์ประกอบของบุคคลที่สามเหล่านี้อาจมีความแตกต่างกันอย่างมากในการปรับแต่ง

วิธีแก้ไขด้วย contain: ห่อ `<iframe>` หรือคอนเทนเนอร์สำหรับวิดเจ็ตของบุคคลที่สามด้วยองค์ประกอบที่มี `contain: strict;` หรืออย่างน้อย `contain: content;` และ `contain: size;`

            .third-party-ad-wrapper {
  width: 300px;
  height: 250px;
  contain: strict; /* Or contain: layout paint size; */
  /* Ensures the ad doesn't affect surrounding layout/paint */
}

.social-widget-container {
  width: 400px;
  height: 600px;
  contain: strict;
}

            

              
                Copy
              
            
          

ประโยชน์: ด้วยการใช้การจำกัดขอบเขตแบบ `strict` คุณจะให้การแยกขอบเขตที่แข็งแกร่งที่สุดเท่าที่จะเป็นไปได้ เบราว์เซอร์จะได้รับแจ้งว่าเนื้อหาของบุคคลที่สามจะไม่ส่งผลกระทบต่อขนาด การจัดวาง สไตล์ หรือการวาดภาพของสิ่งใด ๆ ภายนอก wrapper ที่กำหนดไว้ สิ่งนี้ช่วยจำกัดศักยภาพของเนื้อหาภายนอกในการทำให้ประสิทธิภาพของแอปพลิเคชันหลักของคุณลดลงอย่างมาก ทำให้ผู้ใช้ได้รับประสบการณ์ที่เสถียรและรวดเร็วยิ่งขึ้น โดยไม่คำนึงถึงแหล่งที่มาหรือระดับการปรับแต่งของเนื้อหาที่ฝังไว้

การนำไปใช้เชิงกลยุทธ์: เมื่อใดและอย่างไรจึงจะใช้ contain

แม้ว่า contain จะมอบประโยชน์ด้านประสิทธิภาพที่สำคัญ แต่ก็ไม่ใช่ยาวิเศษที่จะนำไปใช้แบบสุ่มสี่สุ่มห้า การนำไปใช้เชิงกลยุทธ์เป็นกุญแจสำคัญในการปลดล็อกพลังของมันโดยไม่ก่อให้เกิดผลข้างเคียงที่ไม่ตั้งใจ การทำความเข้าใจว่าเมื่อใดและจะใช้อย่างไรเป็นสิ่งสำคัญสำหรับนักพัฒนาเว็บทุกคน

การระบุผู้สมัครสำหรับการจำกัดขอบเขต

องค์ประกอบที่เหมาะสมที่สุดสำหรับการใช้คุณสมบัติ contain คือองค์ประกอบที่:

• ส่วนใหญ่แล้ว เป็นอิสระ จากองค์ประกอบอื่นๆ บนหน้าในแง่ของการจัดวางและสไตล์ภายใน
• มี ขนาดที่คาดเดาได้หรือคงที่ หรือขนาดของมันเปลี่ยนแปลงในลักษณะที่ไม่ควรส่งผลกระทบต่อการจัดวางทั่วโลก
• มักจะมีการ อัปเดตภายใน บ่อยครั้ง เช่น แอนิเมชัน การโหลดเนื้อหาแบบไดนามิก หรือการเปลี่ยนแปลงสถานะ
• มักจะ อยู่นอกหน้าจอ หรือถูกซ่อน แต่เป็นส่วนหนึ่งของ DOM เพื่อการแสดงผลที่รวดเร็ว
• เป็น คอมโพเนนต์ของบุคคลที่สาม ซึ่งพฤติกรรมการเรนเดอร์ภายในอยู่นอกเหนือการควบคุมของคุณ

แนวทางปฏิบัติที่ดีที่สุดสำหรับการนำไปใช้

เพื่อใช้ประโยชน์จากการจำกัดขอบเขต CSS ได้อย่างมีประสิทธิภาพ ให้พิจารณาแนวทางปฏิบัติที่ดีที่สุดเหล่านี้:

• วิเคราะห์ก่อน, ปรับแต่งทีหลัง: ขั้นตอนที่สำคัญที่สุดคือการระบุปัญหาคอขวดด้านประสิทธิภาพที่เกิดขึ้นจริงโดยใช้เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์ (เช่น แท็บ Performance ใน Chrome DevTools, Firefox Performance Monitor) มองหางาน Layout และ Paint ที่ใช้เวลานาน อย่าใช้ contain อย่างสุ่มสี่สุ่มห้า ควรเป็นการปรับแต่งที่มุ่งเป้า
• เริ่มต้นเล็ก ๆ ด้วย `content`: สำหรับคอมโพเนนต์ UI ที่ถูกจำกัดขอบเขตในตัวเองส่วนใหญ่ (เช่น การ์ด, รายการ, วิดเจ็ตพื้นฐาน) contain: content; เป็นจุดเริ่มต้นที่ยอดเยี่ยมและปลอดภัย มันให้ประโยชน์ที่สำคัญสำหรับการจัดวางและการวาดภาพโดยไม่มีข้อจำกัดขนาดที่เข้มงวด
• ทำความเข้าใจผลกระทบของการกำหนดขนาด: หากคุณใช้ `contain: size;` หรือ `contain: strict;` เป็นสิ่งสำคัญอย่างยิ่งที่องค์ประกอบจะต้องมี `width` และ `height` ที่กำหนดไว้ (หรือคุณสมบัติการกำหนดขนาดอื่น ๆ) ใน CSS ของคุณ หากไม่ทำเช่นนั้น องค์ประกอบจะยุบตัวและเนื้อหาจะมองไม่เห็น
• ทดสอบอย่างละเอียดในเบราว์เซอร์และอุปกรณ์ต่างๆ: แม้ว่าการรองรับ contain ในเบราว์เซอร์จะแข็งแกร่ง แต่ควรทดสอบการใช้งานของคุณในเบราว์เซอร์, เวอร์ชันที่แตกต่างกัน และโดยเฉพาะอย่างยิ่งในอุปกรณ์ที่หลากหลาย (เดสก์ท็อป, มือถือ, แท็บเล็ต) และเงื่อนไขเครือข่าย สิ่งที่ทำงานได้อย่างสมบูรณ์บนเดสก์ท็อปประสิทธิภาพสูงอาจทำงานแตกต่างออกไปบนอุปกรณ์มือถือรุ่นเก่าในภูมิภาคที่มีอินเทอร์เน็ตช้ากว่า
• พิจารณาการเข้าถึง: ตรวจสอบให้แน่ใจว่าการใช้ contain ไม่ได้ซ่อนเนื้อหาจากโปรแกรมอ่านหน้าจอโดยไม่ตั้งใจ หรือทำให้การนำทางด้วยแป้นพิมพ์สำหรับผู้ใช้ที่พึ่งพาเทคโนโลยีช่วยเหลือใช้งานไม่ได้ สำหรับองค์ประกอบที่อยู่นอกหน้าจออย่างแท้จริง ตรวจสอบให้แน่ใจว่าได้รับการจัดการอย่างถูกต้องสำหรับการเข้าถึง หากมีจุดประสงค์เพื่อให้สามารถโฟกัสหรืออ่านได้เมื่อนำเข้าสู่มุมมอง
• รวมกับเทคนิคอื่นๆ: contain มีประสิทธิภาพ แต่เป็นส่วนหนึ่งของกลยุทธ์ประสิทธิภาพที่กว้างขึ้น รวมกับเทคนิคการปรับแต่งอื่นๆ เช่น lazy loading, การปรับแต่งรูปภาพ และ JavaScript ที่มีประสิทธิภาพ

ข้อผิดพลาดทั่วไปและวิธีหลีกเลี่ยง

• การตัดเนื้อหาที่ไม่คาดคิด: ปัญหาที่พบบ่อยที่สุด โดยเฉพาะอย่างยิ่งกับ `contain: paint;` หรือ `contain: strict;` หากเนื้อหาของคุณล้นเกินขอบเขตขององค์ประกอบที่ถูกจำกัดขอบเขต มันจะถูกตัดออก ตรวจสอบให้แน่ใจว่าการกำหนดขนาดของคุณแข็งแกร่ง หรือใช้ `overflow: visible;` ตามความเหมาะสม (แม้ว่าสิ่งนี้อาจทำให้ประโยชน์บางอย่างของการจำกัดขอบเขตการวาดภาพหายไป)
• องค์ประกอบที่ยุบตัวด้วย `contain: size;`: ดังที่กล่าวไปแล้ว หากองค์ประกอบที่มี `contain: size;` ไม่มีมิติที่ชัดเจน มันจะยุบตัว จับคู่ `contain: size;` กับ `width` และ `height` ที่กำหนดไว้อย่างสม่ำเสมอ
• ความเข้าใจผิดเกี่ยวกับผลกระทบของ `contain: style;`: แม้ว่าจะไม่ค่อยเป็นปัญหาสำหรับการใช้งานทั่วไป แต่ `contain: style;` สามารถรีเซ็ตตัวนับ CSS หรือส่งผลกระทบต่อการสืบทอดคุณสมบัติฟอนต์สำหรับองค์ประกอบลูกหลานได้ โปรดระวังผลกระทบเฉพาะเหล่านี้หากการออกแบบของคุณพึ่งพาคุณสมบัติเหล่านี้
• การนำไปใช้มากเกินไป: ไม่ใช่องค์ประกอบทุกชิ้นที่ต้องการการจำกัดขอบเขต การใช้กับ `<div>` ทุกส่วนบนหน้าเว็บอาจทำให้เกิดโอเวอร์เฮดของตัวเอง หรือไม่มีประโยชน์ที่วัดผลได้เลย ใช้มันอย่างรอบคอบในจุดที่พบปัญหาคอขวด

นอกเหนือจาก `contain`: มุมมองแบบองค์รวมของประสิทธิภาพเว็บ

แม้ว่า contain ของ CSS จะเป็นเครื่องมือที่มีคุณค่าอย่างยิ่งสำหรับการแยกประสิทธิภาพการเรนเดอร์ แต่สิ่งสำคัญคือต้องจำไว้ว่ามันเป็นเพียงส่วนหนึ่งของปริศนาที่ใหญ่กว่ามาก การสร้างประสบการณ์เว็บที่มีประสิทธิภาพอย่างแท้จริงต้องใช้วิธีการแบบองค์รวม โดยบูรณาการเทคนิคการเพิ่มประสิทธิภาพหลายอย่าง การทำความเข้าใจว่า contain เข้ากันได้อย่างไรในภาพรวมที่กว้างขึ้นนี้จะช่วยให้คุณสามารถสร้างแอปพลิเคชันเว็บที่โดดเด่นไปทั่วโลก

• content-visibility: พี่น้องที่มีประสิทธิภาพ: สำหรับองค์ประกอบที่อยู่นอกหน้าจอเป็นประจำ content-visibility นำเสนอรูปแบบการเพิ่มประสิทธิภาพที่ก้าวร้าวมากยิ่งขึ้นกว่า `contain: paint;` เมื่อองค์ประกอบมี `content-visibility: auto;` เบราว์เซอร์จะข้ามการเรนเดอร์โครงสร้างย่อยทั้งหมดเมื่ออยู่นอกหน้าจอ โดยจะทำงานจัดวางและวาดภาพก็ต่อเมื่อกำลังจะมองเห็นเท่านั้น สิ่งนี้มีประสิทธิภาพอย่างยิ่งสำหรับหน้าเว็บที่ยาวและเลื่อนได้ หรือ accordion มักจะทำงานร่วมกับ contain: layout; ได้ดีสำหรับองค์ประกอบที่เปลี่ยนผ่านระหว่างสถานะนอกหน้าจอและบนหน้าจอ
• will-change: คำแนะนำที่ตั้งใจ: คุณสมบัติ CSS will-change ช่วยให้คุณสามารถส่งสัญญาณไปยังเบราว์เซอร์ได้อย่างชัดเจนว่าคุณสมบัติใดที่คุณคาดว่าจะมีการเคลื่อนไหวหรือเปลี่ยนแปลงในองค์ประกอบในอนาคตอันใกล้ สิ่งนี้ทำให้เบราว์เซอร์มีเวลาในการเพิ่มประสิทธิภาพไปป์ไลน์การเรนเดอร์ เช่น การเลื่อนระดับองค์ประกอบไปยังเลเยอร์ของตัวเอง ซึ่งสามารถนำไปสู่แอนิเมชันที่ราบรื่นขึ้น ใช้เท่าที่จำเป็นและเฉพาะสำหรับการเปลี่ยนแปลงที่คาดการณ์ไว้จริงเท่านั้น เนื่องจากการใช้งานมากเกินไปอาจนำไปสู่การใช้หน่วยความจำที่เพิ่มขึ้น
• เทคนิค Virtualization และ Windowing: สำหรับรายการที่มีขนาดใหญ่มาก (หลายพันหรือหลายหมื่นรายการ) แม้แต่ `contain: content;` ก็อาจไม่เพียงพอ Frameworks และ Libraries ที่ใช้ Virtualization (หรือ Windowing) จะเรนเดอร์เฉพาะส่วนย่อยของรายการที่มองเห็นได้ในพอร์ตการมองเห็นเท่านั้น โดยจะเพิ่มและลบรายการแบบไดนามิกเมื่อผู้ใช้เลื่อนดู นี่คือเทคนิคขั้นสูงสุดสำหรับการจัดการชุดข้อมูลขนาดใหญ่
• การปรับแต่ง CSS: นอกเหนือจาก `contain` ให้ใช้แนวทางปฏิบัติที่ดีที่สุดสำหรับการจัดระเบียบ CSS (เช่น BEM, ITCSS) ลดการใช้ตัวเลือกที่ซับซ้อน และหลีกเลี่ยง `!important` หากเป็นไปได้ การส่งมอบ CSS ที่มีประสิทธิภาพ (การย่อขนาด, การรวมไฟล์, การแทรก CSS ที่จำเป็น) ก็มีความสำคัญอย่างยิ่งต่อการเรนเดอร์เริ่มต้นที่เร็วขึ้น
• การปรับแต่ง JavaScript: จัดการ DOM อย่างมีประสิทธิภาพ, ใช้ debounce หรือ throttle กับ event handlers ที่กระตุ้นการคำนวณที่สิ้นเปลืองทรัพยากร และถ่ายโอนการคำนวณที่หนักหน่วงไปยัง web workers ที่เหมาะสม ลดปริมาณ JavaScript ที่บล็อก main thread ให้เหลือน้อยที่สุด
• การปรับแต่งเครือข่าย: ซึ่งรวมถึงการปรับแต่งรูปภาพ (การบีบอัด, รูปแบบที่ถูกต้อง, รูปภาพที่ตอบสนอง) การโหลดรูปภาพและวิดีโอแบบ lazy loading กลยุทธ์การโหลดฟอนต์ที่มีประสิทธิภาพ และการใช้ Content Delivery Networks (CDNs) เพื่อให้บริการสินทรัพย์ใกล้กับผู้ใช้ทั่วโลกมากขึ้น
• Server-Side Rendering (SSR) / Static Site Generation (SSG): สำหรับเนื้อหาที่สำคัญ การสร้าง HTML บนเซิร์ฟเวอร์หรือในระหว่างการสร้าง สามารถปรับปรุงประสิทธิภาพที่รับรู้ได้อย่างมากและ Core Web Vitals เนื่องจากมีการคำนวณการเรนเดอร์เริ่มต้นไว้ล่วงหน้า

ด้วยการรวมการจำกัดขอบเขต CSS เข้ากับกลยุทธ์ที่กว้างขึ้นเหล่านี้ นักพัฒนาสามารถสร้างแอปพลิเคชันเว็บที่มีประสิทธิภาพสูงอย่างแท้จริง ซึ่งมอบประสบการณ์ที่เหนือกว่าให้กับผู้ใช้ทุกที่ ไม่ว่าจะใช้อุปกรณ์ เครือข่าย หรือตำแหน่งทางภูมิศาสตร์ใดก็ตาม

สรุป: สร้างเว็บที่เร็วขึ้นและเข้าถึงได้ง่ายขึ้นสำหรับทุกคน

คุณสมบัติ contain ของ CSS เป็นข้อพิสูจน์ถึงวิวัฒนาการอย่างต่อเนื่องของมาตรฐานเว็บ ซึ่งช่วยให้นักพัฒนาสามารถควบคุมประสิทธิภาพการเรนเดอร์ได้อย่างละเอียด ด้วยการช่วยให้คุณสามารถแยกคอมโพเนนต์ได้อย่างชัดเจน มันช่วยให้เบราว์เซอร์ทำงานได้อย่างมีประสิทธิภาพมากขึ้น ลดงานจัดวางและการวาดภาพที่ไม่จำเป็นซึ่งมักเป็นปัญหาในแอปพลิเคชันเว็บที่ซับซ้อน สิ่งนี้ส่งผลโดยตรงต่อประสบการณ์ผู้ใช้ที่ลื่นไหล ตอบสนองได้ดี และสนุกสนานยิ่งขึ้น

ในโลกที่การแสดงตนทางดิจิทัลมีความสำคัญสูงสุด ความแตกต่างระหว่างเว็บไซต์ที่มีประสิทธิภาพกับเว็บไซต์ที่ทำงานช้า มักเป็นตัวกำหนดความสำเร็จหรือความล้มเหลว ความสามารถในการมอบประสบการณ์ที่ราบรื่นไม่ได้เป็นเพียงเรื่องของสุนทรียภาพเท่านั้น แต่ยังเกี่ยวกับความสามารถในการเข้าถึง การมีส่วนร่วม และท้ายที่สุด การลดความเหลื่อมล้ำทางดิจิทัลสำหรับผู้ใช้จากทุกมุมโลก ผู้ใช้ในประเทศกำลังพัฒนาที่เข้าถึงบริการของคุณบนโทรศัพท์มือถือรุ่นเก่าจะได้รับประโยชน์อย่างมหาศาลจากเว็บไซต์ที่ปรับแต่งด้วย CSS containment เช่นเดียวกับผู้ใช้ที่เชื่อมต่อด้วยไฟเบอร์ออปติกและใช้เดสก์ท็อปประสิทธิภาพสูง

เราขอแนะนำให้นักพัฒนาส่วนหน้าทุกคนเจาะลึกความสามารถของ contain วิเคราะห์แอปพลิเคชันของคุณ ระบุพื้นที่ที่พร้อมสำหรับการปรับแต่ง และใช้การประกาศ CSS ที่ทรงพลังเหล่านี้อย่างมีกลยุทธ์ เปิดรับ contain ไม่ใช่เพื่อการแก้ไขด่วน แต่เป็นการตัดสินใจทางสถาปัตยกรรมที่รอบคอบ ซึ่งมีส่วนช่วยให้โปรเจกต์เว็บของคุณแข็งแกร่งและมีประสิทธิภาพ

ด้วยการเพิ่มประสิทธิภาพไปป์ไลน์การเรนเดอร์อย่างพิถีพิถันผ่านเทคนิคต่างๆ เช่น CSS containment เรามีส่วนร่วมในการสร้างเว็บที่เร็วขึ้น มีประสิทธิภาพมากขึ้น และเข้าถึงได้จริงสำหรับทุกคน ทุกที่ ความมุ่งมั่นในประสิทธิภาพนี้คือความมุ่งมั่นต่ออนาคตดิจิทัลที่ดีขึ้นทั่วโลก เริ่มทดลองใช้ contain วันนี้และปลดล็อกประสิทธิภาพเว็บระดับถัดไปสำหรับแอปพลิเคชันของคุณ!